// 创建函数式组件    函数式组件：返回值是jsx代码的就是函数式组件
// function App() {
//   return <h2>我是函数式组件！！</h2>;
// }

import { useState } from "react";
import Logs from "./components/Logs/Logs";
import LogsForm from "./components/LogsForm/LogsForm";
import "./App.css";

// 也可以使用箭头函数
const App = () => {
  // 定义数组
  const [data, setData] = useState([
    {
      month: "三月",
      day: "20",
      desc: "vue",
      time: "40分钟",
    },
    {
      month: "四月",
      day: "25",
      desc: "react",
      time: "40分钟",
    },
    {
      month: "六月",
      day: "21",
      desc: "javascript",
      time: "40分钟",
    },
    {
      month: "七月",
      day: "22",
      desc: "css",
      time: "40分钟",
    },
  ]);

  const addData = (val) => {
    console.log(val);
    setData([
      ...data,
      val
    ])
    // data.push(val);
  };

  return (
    <div id="app">
      <LogsForm addData={addData}></LogsForm>
      <Logs data={data} />
    </div>
  );
};

export default App;
